<template><div><h2 id="js可以出现在等号右边的有哪些东西-一一列举" tabindex="-1"><a class="header-anchor" href="#js可以出现在等号右边的有哪些东西-一一列举"><span>js可以出现在等号右边的有哪些东西，一一列举</span></a></h2>
<ol>
<li>
<p>字面量(直接表示的值)</p>
</li>
<li>
<p>变量</p>
</li>
<li>
<p>表达式</p>
</li>
<li>
<p>函数调用结果</p>
</li>
<li>
<p>对象</p>
</li>
<li>
<p>函数</p>
</li>
</ol>
<h2 id="函数的返回值可以是函数吗-简述js闭包的原理-以及js闭包是用来干嘛的-以及现在为啥不用闭包了" tabindex="-1"><a class="header-anchor" href="#函数的返回值可以是函数吗-简述js闭包的原理-以及js闭包是用来干嘛的-以及现在为啥不用闭包了"><span>函数的返回值可以是函数吗，简述JS闭包的原理，以及JS闭包是用来干嘛的，以及现在为啥不用闭包了</span></a></h2>
<p>函数的返回值可以是函数，js把一切都看作是对象，返回函数就相当于返回一个类型为函数的对象。</p>
<p>JS闭包一般用来访问局部函数中声明的变量(js模块化，变量作用域隔离),在局部作用域中，通过创建一个函数对象，通过这个函数对象可以访问到局部作用域下其他声明的变量，再把这个函数对象返回给上层，只要调用这个局部函数并且接收了这个返回值，函数的返回值的这个函数对象就会被引用挂载到当前this对象下，从而导致局部作用域的这个对象一直无法被GC。</p>
<blockquote>
<p>闭包可以保存某个函数执行时的栈帧，可以实现多个函数进行并行执行，即惰性计算</p>
</blockquote>
<p>不用闭包的原因就是容易造成内存泄漏。且ES6更新类和对象，所以不在使用闭包</p>
<div class="language-javascript line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="javascript" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#C678DD">　　var</span><span style="color:#E06C75"> name</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "The Window"</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">　　var</span><span style="color:#E06C75"> object</span><span style="color:#56B6C2"> =</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#E06C75">　　　　name </span><span style="color:#ABB2BF">: </span><span style="color:#98C379">"My Object"</span><span style="color:#ABB2BF">,</span></span>
<span class="line"></span>
<span class="line"><span style="color:#61AFEF">　　　　getNameFunc</span><span style="color:#ABB2BF"> : </span><span style="color:#C678DD">function</span><span style="color:#ABB2BF">(){</span></span>
<span class="line"><span style="color:#C678DD">　　　　　　return</span><span style="color:#C678DD"> function</span><span style="color:#ABB2BF">(){</span></span>
<span class="line"><span style="color:#C678DD">　　　　　　　　return</span><span style="color:#E5C07B"> this</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">name</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">　　　　　　};</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">　　　　}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">　　};</span></span>
<span class="line"></span>
<span class="line"><span style="color:#61AFEF">　　alert</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">object</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getNameFunc</span><span style="color:#ABB2BF">()());</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><h2 id="async-await和promise方式有什么区别-简单描述回调地狱是什么" tabindex="-1"><a class="header-anchor" href="#async-await和promise方式有什么区别-简单描述回调地狱是什么"><span>async/await和promise方式有什么区别，简单描述回调地狱是什么</span></a></h2>
<p>promise 表示一个异步任务最终的结果，他有三种状态，pending（进行中），fulfilled（已解决），rejected（拒绝），then函数设置操作成功的callback，catch函数设置操作失败的callback，此外then和catch函数都会返回一个promise，所以支持链式调用</p>
<p>async/await 基于promise封装的语法糖，让代码可读性更好，async声明函数为异步，不阻塞主函数运行。当代码执行到async函数中的await时，代码就在此处等待不继续往下执行，直到await拿到Promise对象中resolve的数据，才继续往下执行，这样就保证了代码的执行顺序，而且使异步代码看起来更像同步代码。，当await 后面的promise对象rejected了会抛出异常，fulfilled则返回结果，减少写回调函数，增加可读性。</p>
<p>回调地狱就是回调函数里面嵌入回调函数让代码可读性变得非常差。</p>
<h2 id="浏览器调用摄像头的api有哪些-分为调用api和回调api" tabindex="-1"><a class="header-anchor" href="#浏览器调用摄像头的api有哪些-分为调用api和回调api"><span>浏览器调用摄像头的API有哪些，分为调用API和回调API</span></a></h2>
<h3 id="mediadevices" tabindex="-1"><a class="header-anchor" href="#mediadevices"><span>MediaDevices</span></a></h3>
<p>用navigator.mediaDevices来获取MediaDevices。<br>
此对象获取用户的媒体设备</p>
<ul>
<li>getUserMedia() 向用户请求获取指定的设备</li>
<li>enumerateDevices() 获取当前可用的媒体设备列表，如摄像头、麦克风等。</li>
</ul>
<h3 id="mediastream" tabindex="-1"><a class="header-anchor" href="#mediastream"><span>MediaStream</span></a></h3>
<p>媒体流，包含着0个或者多个各种代表着视频或者音频的通道。</p>
<h2 id="练习" tabindex="-1"><a class="header-anchor" href="#练习"><span>练习</span></a></h2>
<p>打开浏览器的视频流，完成以下功能，开摄像头、关闭摄像头、当摄像头回调时候将帧显示在屏幕上，同时保存在内存中，保留最近1800帧，点击按钮可以吧这1800帧的视频下载下来。</p>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>摄像头调用&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#D19A66">        .layout</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">            width: </span><span style="color:#D19A66">100</span><span style="color:#E06C75">%</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D19A66">        .layout</span><span style="color:#E06C75"> video</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">            display: </span><span style="color:#D19A66">block</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            margin: </span><span style="color:#D19A66">0</span><span style="color:#D19A66"> auto</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D19A66">        .layout</span><span style="color:#E06C75"> button</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">            display: </span><span style="color:#D19A66">block</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            margin: </span><span style="color:#D19A66">10</span><span style="color:#E06C75">px</span><span style="color:#D19A66"> auto</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"layout"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">video</span><span style="color:#D19A66"> id</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"videoElement"</span><span style="color:#ABB2BF">>&#x3C;/</span><span style="color:#E06C75">video</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">button</span><span style="color:#D19A66"> id</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"startCamera"</span><span style="color:#ABB2BF">>开启摄像头&#x3C;/</span><span style="color:#E06C75">button</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">button</span><span style="color:#D19A66"> id</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"stopCamera"</span><span style="color:#ABB2BF">>关闭摄像头&#x3C;/</span><span style="color:#E06C75">button</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">button</span><span style="color:#D19A66"> id</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"record"</span><span style="color:#ABB2BF">>录制1800帧&#x3C;/</span><span style="color:#E06C75">button</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">button</span><span style="color:#D19A66"> id</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"download"</span><span style="color:#ABB2BF">>下载视频&#x3C;/</span><span style="color:#E06C75">button</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#C678DD">        let</span><span style="color:#E06C75"> videoElement</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">        let</span><span style="color:#E06C75"> mediaStream</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">        let</span><span style="color:#E06C75"> mediaRecorder</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">        let</span><span style="color:#E06C75"> recordedChunks</span><span style="color:#56B6C2"> =</span><span style="color:#ABB2BF"> [];</span></span>
<span class="line"><span style="color:#C678DD">        async</span><span style="color:#C678DD"> function</span><span style="color:#61AFEF"> startCamera</span><span style="color:#ABB2BF">() {</span></span>
<span class="line"><span style="color:#C678DD">            try</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#E06C75">                mediaStream</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> await</span><span style="color:#E5C07B"> navigator</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">mediaDevices</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getUserMedia</span><span style="color:#ABB2BF">({</span></span>
<span class="line"><span style="color:#E06C75">                    video</span><span style="color:#ABB2BF">: {</span></span>
<span class="line"><span style="color:#E06C75">                        width</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">200</span><span style="color:#ABB2BF">, </span><span style="color:#7F848E;font-style:italic">// 录制宽度</span></span>
<span class="line"><span style="color:#E06C75">                        height</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">200</span><span style="color:#ABB2BF">, </span><span style="color:#7F848E;font-style:italic">// 录制高度</span></span>
<span class="line"><span style="color:#E06C75">                        frameRate</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">60</span><span style="color:#ABB2BF">, </span><span style="color:#7F848E;font-style:italic">// 帧率</span></span>
<span class="line"><span style="color:#ABB2BF">                    },</span></span>
<span class="line"><span style="color:#E06C75">                    audio</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">false</span></span>
<span class="line"><span style="color:#ABB2BF">                })</span></span>
<span class="line"><span style="color:#E06C75">                videoElement</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> document</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getElementById</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'videoElement'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">                videoElement</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">srcObject</span><span style="color:#56B6C2"> =</span><span style="color:#E06C75"> mediaStream</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#E5C07B">                videoElement</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">play</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#ABB2BF">            } </span><span style="color:#C678DD">catch</span><span style="color:#ABB2BF"> (</span><span style="color:#E06C75">error</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#E5C07B">                console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'无法获取媒体设备：'</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">error</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">            }</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#C678DD">        function</span><span style="color:#61AFEF"> stopCamera</span><span style="color:#ABB2BF">() {</span></span>
<span class="line"><span style="color:#E5C07B">            mediaStream</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getTracks</span><span style="color:#ABB2BF">().</span><span style="color:#61AFEF">forEach</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">track</span><span style="color:#C678DD"> =></span><span style="color:#E5C07B"> track</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">stop</span><span style="color:#ABB2BF">()); </span><span style="color:#7F848E;font-style:italic">// 拿到所有的轨道，然后停止</span></span>
<span class="line"><span style="color:#E5C07B">            videoElement</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">srcObject</span><span style="color:#56B6C2"> =</span><span style="color:#D19A66"> null</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">// 必须清空否则会黑屏</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#C678DD">        function</span><span style="color:#61AFEF"> recordCamera</span><span style="color:#ABB2BF">() {</span></span>
<span class="line"><span style="color:#E06C75">            mediaRecorder</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> MediaRecorder</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">mediaStream</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">            mediaRecorder</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">ondataavailable</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> function</span><span style="color:#ABB2BF"> (</span><span style="color:#E06C75;font-style:italic">e</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#E5C07B">                console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'事件触发'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">                if</span><span style="color:#ABB2BF"> (</span><span style="color:#E5C07B">e</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">data</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">size</span><span style="color:#56B6C2"> ></span><span style="color:#D19A66"> 0</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#C678DD">                    if</span><span style="color:#ABB2BF"> (</span><span style="color:#E5C07B">recordedChunks</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">length</span><span style="color:#56B6C2"> ==</span><span style="color:#D19A66"> 1800</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#E5C07B">                        recordedChunks</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">shift</span><span style="color:#ABB2BF">(); </span><span style="color:#7F848E;font-style:italic">// 移除第一个元素</span></span>
<span class="line"><span style="color:#ABB2BF">                    }</span></span>
<span class="line"><span style="color:#E5C07B">                    recordedChunks</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">push</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">e</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">data</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">                }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">            };</span></span>
<span class="line"><span style="color:#E5C07B">            mediaRecorder</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">start</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">1000</span><span style="color:#56B6C2"> /</span><span style="color:#D19A66"> 60</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 将帧回显的间隔和帧率保持一致</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#C678DD">        function</span><span style="color:#61AFEF"> downloadCamera</span><span style="color:#ABB2BF">() {</span></span>
<span class="line"><span style="color:#E5C07B">            mediaRecorder</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">stop</span><span style="color:#ABB2BF">(); </span><span style="color:#7F848E;font-style:italic">// 停止录制</span></span>
<span class="line"><span style="color:#C678DD">            const</span><span style="color:#E5C07B"> blob</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> Blob</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">recordedChunks</span><span style="color:#ABB2BF">, { </span><span style="color:#E06C75">type</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'video/mp4'</span><span style="color:#ABB2BF"> }); </span><span style="color:#7F848E;font-style:italic">// 生成一个二进制文件</span></span>
<span class="line"><span style="color:#C678DD">            const</span><span style="color:#E5C07B"> url</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> URL</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">createObjectURL</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">blob</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 生成一个临时的url</span></span>
<span class="line"><span style="color:#C678DD">            const</span><span style="color:#E5C07B"> a</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> document</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">createElement</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'a'</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 创建一个a标签</span></span>
<span class="line"><span style="color:#E5C07B">            a</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">href</span><span style="color:#56B6C2"> =</span><span style="color:#E06C75"> url</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">// 把url赋值给a标签的href属性</span></span>
<span class="line"><span style="color:#E5C07B">            a</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">download</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> '1800_test.mp4'</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">// 下载的文件名</span></span>
<span class="line"><span style="color:#E5C07B">            a</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">click</span><span style="color:#ABB2BF">(); </span><span style="color:#7F848E;font-style:italic">// 点击a标签</span></span>
<span class="line"><span style="color:#E5C07B">            URL</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">revokeObjectURL</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">url</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 释放url</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#E5C07B">        document</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getElementById</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'startCamera'</span><span style="color:#ABB2BF">).</span><span style="color:#61AFEF">addEventListener</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'click'</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">startCamera</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">        document</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getElementById</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'stopCamera'</span><span style="color:#ABB2BF">).</span><span style="color:#61AFEF">addEventListener</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'click'</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">stopCamera</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">        document</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getElementById</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'record'</span><span style="color:#ABB2BF">).</span><span style="color:#61AFEF">addEventListener</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'click'</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">recordCamera</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">        document</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getElementById</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'download'</span><span style="color:#ABB2BF">).</span><span style="color:#61AFEF">addEventListener</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'click'</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">downloadCamera</span><span style="color:#ABB2BF">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div></div></template>


